<%@ page language="java" contentType="text/html;charset=utf-8" %>
<!doctype html>
<html>
<head>
    <jsp:include page="head.jsp"></jsp:include>
    <title>绑定谷歌验证器</title>
</head>
<body class="devpreview hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <jsp:include page="nav.jsp"></jsp:include>
    <jsp:include page="left.jsp"></jsp:include>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box border" >
                        <div class="box-header with-border">
                            <button type="button" data-toggle="modal" data-target="#newWhiteIpsModal"
                                    class="btn btn-primary" onclick="getSecret()">
                                绑定验证器秘钥
                            </button>
                        </div>
                        <!-- /.box-header -->
                        <%--<div class="box-body container-fluid">--%>
                            <%--<div class="row">--%>
                                <%--<%--%>
                                    <%--List<WhiteIps> whiteIpsList = (List<WhiteIps>) request.getAttribute("ips");--%>
                                    <%--for (WhiteIps w : whiteIpsList) {--%>
                                <%--%>--%>
                                <%--<div class="col-md-2 margin-r-5 with-border">--%>
                                        <%--<span style="font-size: 24px;color:#888"><%=w.getIpAddress()%></span>--%>
                                        <%--<button onClick="ipsPreDel(<%=w.getId()%>)" type="button" class="close"--%>
                                                <%--data-toggle="modal" data-target="#myModal">--%>
                                            <%--<span aria-hidden="true">&times;</span>--%>
                                        <%--</button>--%>
                                <%--</div>--%>
                                <%--<%}%>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <%--<jsp:include page="foot.jsp"></jsp:include>--%>

    <!-- Modal 弹窗警告-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span style="color:red">警告!</span></h4>
                </div>
                <div class="modal-body">
                    您确定要删除这个验证器秘钥吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="ipsSureDel()">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 新增模态-->
    <div class="modal fade" id="newWhiteIpsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title control-label" id="newWhiteIpsModallabel">添加新的验证器</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group form-group-md">
                            <div class="col-sm-1"></div>
                            <div class="col-sm-11">
                                <span style="color: #FF0000">绑定方式：使用谷歌验证器二维码扫码绑定或者手动输入商户号及下列秘钥绑定</span>
                            </div>
                        </div>

                        <div class="form-group form-group-md">
                            <label class="col-sm-3 control-label" for="ipAddress">验证器秘钥:</label>
                            <div class="col-sm-9">
                                <span class="control-label" id="ipAddress"/>
                            </div>
                        </div>
                        <div class="form-group form-group-md">
                            <div class="col-sm-2">
                            </div>
                            <div class="col-sm-4">
                            <img id="show_qrcode" src="http://qr.liantu.com/api.php?w=195&text=11" height="210" style="display: block; width: 310px; height: 270px;">
                            </div>
                            <div class="col-sm-4">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="ipsAdd()">已绑定成功</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="<%= request.getAttribute("StaticHost") %>/js/fastclick.js"></script>
<script src="<%= request.getAttribute("StaticHost") %>/js/adminlte.min.js"></script>
<script language="JavaScript">
    var preDelId = null;

    /**
     * 预删除存起id
     */
    function ipsPreDel(id) {
        if (!!id) {
            preDelId = id;
        }
    }
    
    function  getSecret() {
        $.ajax({
            url: contextPath + "/ips/getSecret",
            type: "GET",
            async: true,//true异步 false同步
            context: this,
            timeout: 10000,
            success: function (data) {
                if (data && data.code == "200") {
                    $("#show_qrcode").attr("src", "http://qr.liantu.com/api.php?w=195&text="+data.imgSrc);
                    $("#ipAddress").text(data.secretKey);
                }else{
                    $('#newWhiteIpsModal').modal('hide');
                    alert("已存在验证器秘钥");
                }
            },
            error: function (d, s, b) {
                $('#newWhiteIpsModal').modal('hide');
                alert("已存在验证器秘钥");
            }
        });
    }

    /**
     * 正式删除发起请求,调后端删除接口
     */
    function ipsSureDel() {
        $.ajax({
            url: contextPath + "/ips/delete",
            data: {id: preDelId},
            type: "POST",
            async: true,//true异步 false同步
            context: this,
            timeout: 10000,
            success: function (data) {
                if (data && data.code == 200) {
                    location.href = '${pageContext.request.contextPath}/ips/query';
                }
            },
            error: function (d, s, b) {
                console.log("失败:", b);
            }
        });
    }

    /**
     * 新增一个ip白名单
     */
    function ipsAdd() {
        //取值
        var ipAddress = $("#ipAddress").text();

        //校验
        if (!ipAddress) {
            alert("IP地址不能为空");
            return ;
        }
        //请求
        $.ajax({
            url: contextPath + "/ips/add",
            data: {ipAddress: ipAddress},
            type: "POST",
            async: true,//true异步 false同步
            context: this,
            timeout: 10000,
            success: function (data) {
                if (data && data.code == 200) {
                    location.href = '${pageContext.request.contextPath}/ips/query';
                }
            },
            error: function (d, s, b) {
                console.log("失败:", b);
            }
        });
    }

    /**
     * 监听回车
     */
    $(function(){
        $("#ipAddress").keypress(function (event) {
            var key = event.which;
            if (key == 13) {
                ipsAdd();
                return false;
            }
        });
    });
</script>
</body>
</html>

